<template>
  <el-card class="entry-charts">
    <div id="myCharts" class="charts" ref="entryCharts"></div>
    <dept-select
      class="filter-select"
      :onlyCompany="true"
      placeholder="选择公司"
      :value.sync="deptId"
      :clearable="false"
      @getDeptDetailData="getDeptDetailData"
    />
  </el-card>
</template>

<script>
import { statisticsEntryEmpByCompanyApi } from "@/api/employee";
export default {
  name: "EntryCharts",
  data() {
    return {
      deptId: 2,
      key: [],
      value: [],
      currentMonth: new Date().getMonth() + 1,
      dept: {
        deptName: "1024软件科技有限公司",
      },
    };
  },
  created() {
    let currDate = new Date();
    this.currentMonth =
      currDate.getFullYear() + "-" + (currDate.getMonth() + 1);
  },
  mounted() {
    this.getStatisticsData();
  },
  watch: {
    deptId(nVal) {
      if (!nVal) this.deptId = 2;
      this.getStatisticsData();
    },
  },
  methods: {
    async getStatisticsData() {
      const myCharts = this.$echarts.init(this.$refs.entryCharts);
      const { data, code } = await statisticsEntryEmpByCompanyApi(this.deptId);
      if (code !== 200) return;
      console.log(data)
      this.key = [];
      this.value = [];
      data.forEach((item) => {
        for (let key in item) {
          if (key === "total") {
            this.value.push(item[key]);
          } else if (key === "dept_name") {
            this.key.push(item[key]);
          }
        }
      });
      console.log(this.value)
      let options = {
        title: {
          text: "公司各部门员工月入职数",
          subtext: `${this.currentMonth}月份，${this.dept.deptName}的情况`,
        },
        legend: {
          data: ["人事部", "技术部", "生产部", "市场部", "运维部"],
        },

        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          //鼠标悬浮框的提示文字
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: this.key,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 人",
          },
        },
        series: [
          {
            color: "#e55039",
            data: this.value,
            itemStyle: {
              color: function (params) {
                var colorList = [
                  "#2c3e50",
                  "#2980b9",
                  "#8e44ad",
                  "#e74c3c",
                  "#FD7272",
                  "#27ae60",
                  "#45aaf2",
                  "#0fb9b1",
                  "#e74c3c",
                  "#e74c3c",
                  "#FD7272",
                  "#45aaf2",
                  "#2c3e50",
                  "#0fb9b1",
                ];
                return colorList[params.dataIndex];
              },
            },
            type: "bar",
          },
        ],
      };
      myCharts.clear();
      myCharts.setOption(options);
    },
    getDeptDetailData(dept) {
      this.dept = dept;
    },
  },
};
</script>

<style scoped lang="scss">
.entry-charts {
  margin-top: 30px;
  position: relative;
}
.charts {
  height: 400px;
}
.filter-select {
  width: 200px;
  position: absolute;
  left: 300px;
  top: 16px;
}
</style>
